<template>
  <!-- @open="handleOpen" @close="handleClose"  -->
    <el-menu class="el-menu-vertical-demo" :default-active="$route.name"
        :collapse="isCollapse" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"
       >
        <template v-for="(item) in routes">
            <!-- 没有子菜单 -->
            <router-link :to="{ name: item.name }" tag="div" :key="item.name" v-if="!item.children">
                <el-menu-item :index="item.name">
                    <i :class="item.meta.icon"></i>
                    <span slot="title">{{ item.meta.title }}</span>
                </el-menu-item>
            </router-link>
            <!-- 有子菜单 -->
            <el-submenu v-else  index="item.name"   >
                <template slot="title">
                    <i :class="item.meta.icon"></i>
                    <span>{{ item.meta.title }}</span>
                </template>
                <router-link v-for="child in item.children" :to="{ name: child.name }" tag="div" :key="child.name">
                    <el-menu-item :index="child.name">
                        <i :class="child.meta.icon"></i>
                    <span>{{
                            child.meta.title
                    }}</span></el-menu-item>
                </router-link>
            </el-submenu>
        </template>
    </el-menu>
</template>
<script>
export default {
    name: "Sidebar",
    data(){
          return{
            // isCollapse:true
          }
    },
    props:{
        routes : {
            type:Array,
            default(){
                return[];
            }
        },
        isCollapse:{
          type:Boolean,
          default:false
        }
        
    },
};
</script>
<style lang="less" scoped>
//解决收缩时文字卡一下
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
</style>